<template>
	<div class="app-container">
		<el-card style="width: 100%; margin-bottom:20px;">
			<div style="display:flex; justify-content: space-between;">
				<div style=" display:flex; color:#787878; font-size:14px;">
					<div style="width: 240px; margin-right:40px;">
						排序
						<el-select v-model="rolesIndex" placeholder="Select" size="large" style="width: 240px">
							<el-option v-for="item in rolesList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</div>
					<div style="width: 240px; margin-right:40px;">
						客户类型
						<el-select v-model="statusIndex" placeholder="Select" size="large" style="width: 240px">
							<el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</div>
					<div style="width: 240px; margin-right:40px;">
						姓名/手机号
						<el-input v-model="input" style="width: 240px" placeholder="姓名/手机号" />
					</div>
					<div style="width: 240px; margin-top: 15px;">
						<el-button type="primary" size="small" @click.stop="getList">
							搜索
						</el-button>
						<el-button type="primary" size="small">
							导出报表
						</el-button>
					</div>
				</div>
			</div>
		</el-card>

		<el-card style="margin-bottom: 10px; font-size: 14px;">
			总消费金额共<span style="color:#41c3a8;">{{ list.member_total_amount }}</span>元，总耗卡金额共<span
				style="color:#41c3a8;">{{ list.member_card_total_amount }}</span>元，总剩余资产共<span
				style="color:#41c3a8;">{{ list.member_remaining_assets }}</span>元
		</el-card>

		<el-table ref="singleTable" v-loading="listLoading" :row-style="{ background: '#f2f2f2' }" style="width: 100%"
			stripe :data="list.list" highlight-current-row @current-change="handleCurrentChange">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column type="index" width="50" />
			<el-table-column label="姓名" width="200px">
				<template slot-scope="{row}">
					<div style="display:flex;">
						<span style="height:30px; line-height: 30px;">{{ row.name }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="手机号">
				<template slot-scope="{row}">
					<span>{{ row.phone }}</span>
				</template>
			</el-table-column>

			<el-table-column label="客户类型">
				<template slot-scope="{row}">
					<span>{{ row.customer_type_desc }}</span>
				</template>
			</el-table-column>

			<el-table-column label="会籍顾问">
				<template slot-scope="{row}">
					<span>{{ row.consultant_name }}</span>
				</template>
			</el-table-column>

			<el-table-column label="消费金额">
				<template slot-scope="{row}">
					<span>{{ row.total_revenue }}</span>
				</template>
			</el-table-column>

			<el-table-column label="耗卡金额">
				<template slot-scope="{row}">
					<span>{{ row.total_usage }}</span>
				</template>
			</el-table-column>

			<el-table-column label="剩余资产">
				<template slot-scope="{row}">
					<span>{{ row.total_remaining_assets }}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" label="操作">
				<template>
					<!-- <router-link :to="'/example/edit/'+scope.row.id"> -->
					<el-button type="primary" size="small" icon="el-icon-edit">
						查看
					</el-button>
					<!-- </router-link> -->
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="list.total>0" :total="list.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'debt',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 20
				},
				status: {
					0: {
						'id': 1,
						'name': '全部'
					},
					1: {
						'id': 2,
						'name': '会员'
					},
					2: {
						'id': 3,
						'name': '访客'
					}
				},
				rolesList: {
					0: {
						'id': 1,
						'name': '按照消费金额排序'
					},
					1: {
						'id': 2,
						'name': '按照耗卡金额排序'
					},
					2: {
						'id': 3,
						'name': '按照剩余资产排序'
					}
				},
				statusIndex: '全部',
				rolesIndex: '按照消费金额排序'
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '资产负债表',
				url: '/finance/debt',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				this.list = {
					'total': 0,
					'member_total_amount': '0.00',
					'member_card_total_amount': '0.00',
					'member_remaining_assets': '0.00',
					'list': []
				}
				this.listLoading = false
			},
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			}
		}
	}
</script>

<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #41c3a8;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */
</style>
